<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-select v-model="selectOptions.query" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-form-item>
          <el-input :placeholder="selectOptions.query" v-model="selectOptions.keywords" @keyup.enter.native="doSearch"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="doSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background: #13ce66" v-on:click="_reload">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="strategys" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;" element-loading-text="玩命请求中。。。">
      <el-table-column label="id" width="60" prop="id">
      </el-table-column>
      <el-table-column label="新闻图片" width="280">
        <template slot-scope="scope">
          <div class="banner" v-if="scope.row.pic">
            <a :href="scope.row.pic" target="_blank"><img :src="scope.row.pic" :alt="scope.row.title"></a>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="新闻标题" width="250">
      </el-table-column>
      <el-table-column prop="from" label="新闻来源" width="250">
      </el-table-column>
      <el-table-column prop="desc" label="新闻简介" min-width="200" :formatter="list">
      </el-table-column>
      <el-table-column prop="top" label="新闻置顶" width="100">
        <template slot-scope="scope">
          <div class="list" @click="topChange(scope.row.top, scope.row.id)">
            <el-button size="small" type="success" v-if="scope.row.top > 0">取消</el-button>
            <el-button size="small" type="warning" v-else>置顶</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="新闻详情" width="100" >
        <template slot-scope="scope">
          <el-button type="small" size="small" @click="getDetail(scope.$index, scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="update_time" label="更新日期" width="180">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)" msg="scope.row">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情页面 -->
    <el-dialog title="详情页面" v-model="detailFormVisible" :close-on-click-modal="false" style="width: 1200px;margin: 0 auto;">
      <template>
        <div class="plantWay" v-html="content"></div>
      </template>
    </el-dialog>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectOptions.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px">共 {{total}} 条数据</span>
    </el-col>
  </section>
</template>

<script scoped type="text/ecmascript-6">
  import NProgress from 'nprogress'
  import { apiTree } from '../../apiTree'

  export default {
    data() {
      return {
        filters: {
          name: ''
        },
        options: [
          {value: 'id', label: '新闻id'},
          {value: 'from', label: '来源'}
        ],
        detailFormVisible: false, // 详情页面
        strategys: [],
        total: 0,
        page: 1,
        listLoading: false,
        sels: [], // 列表选中列
        editFormVisible: false, // 编辑界面是否显示
        editLoading: false,
        content: '',
        editFormRules: {
          title: [
            {required: true, message: '请输入标题', trigger: 'blur'}
          ]
        },
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
          query: this.$route.query.query !== undefined ? this.$route.query.query : '',
          keywords: this.$route.query.keywords !== undefined ? this.$route.query.keywords : ''
        }
      }
    },
    methods: {
      topChange: function (top, id) {
        let param = {'top': top, 'id': id}
        apiTree('news/index', 'news/changeTop', param).then((res) => {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getNews()
        })
      },
      // 搜索
      doSearch() {
          this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      list: function (row, column) {
        let con = '';
        if (row.desc) {
          con = row.desc.substring(0, 150)
          con += '...'
        }
        return con
      },
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      handleCurrentChange(val) {
        this.page = val
        this.getNews()
      },
      // 获取用户列表
      getNews() {
        let param = this.$route.query
        this.listLoading = true
        NProgress.start()
        apiTree('news/index', 'news/index', param).then((res) => {
          this.total = res.d.total_num
          this.strategys = res.d.data
          this.listLoading = false
          NProgress.done()
        })
      },
      // 删除
      handleDel: function (index, row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          // NProgress.start()
          let param = {id: row.id}
          apiTree('news/index', 'news/delete', param).then((res) => {
            this.listLoading = false
            // NProgress.done()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getNews()
          })
        }).catch(() => {

        })
      },
      // 显示编辑界面
      handleEdit: function (_id) {
        this.$router.push('/news/edit/id/' + _id)
      },
      // 显示新增界面
      handleAdd() {
        this.$router.push('/news/add')
      },
      getDetail: function (index, row) {
        this.detailFormVisible = true
        this.content = row.content
      },
      _reload() {
        this.getNews()
      },
      selsChange: function (sels) {
        this.sels = sels
      }
    },
    mounted() {
      this.getNews()
    },
    watch: {
      $route: 'getNews'
    }
  }

</script>

<style lang="stylus" rel="stylesheet/stylus">
  .banner
    width 150px
    height 85px
    padding 5px 8px
  .plantWay
    overflow scroll
    margn auto
    width 414px
    height 636px
    text-overflow ellipsis
    word-wrap break-word
    background #E6E6E6
</style>
